//导入路由
import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router'
//导入视图
import Home from '../views/Home.vue'

// 2 进行路由表配置
const routes = [
    {
        path:'/',
        name:'home',
        component: Home,
        // 创建子路由 （然后在home父路由里面进行配置：<router-view></router-view>）
        children:[
            {
                path:'list',
                name:'list',
                //路由懒加载
                component:()=>import('../views/List.vue'), //http://localhost:5173/#/list
            },
            {
                path:'detail/:id',
                name:'详情页',
                //获取数据
                component:()=>import('../views/Detail.vue'), //注意手动选择导入一下 不然会报错 http://localhost:5173/#/detail/11

            },
            {
                path:'query',
                name:'查询页面',
                //传参
                component:()=>import('../views/Query.vue'),  //http://localhost:5173/#/query?id=333  
            },
            
        ]
    },
    {    
        //第一种 对应index.vue的不同取值方式
        // path:'/index/:id',  http://localhost:5173/index/222
        //第二种      
        path:'/index',   //注意这里的 /   http://localhost:5173/index?id=222&name=lisi#/
        name:'Index',
        component:()=>import('../views/Index.vue')   
    },
    {
        path: '/pinia',
        name: 'Pinia',
        component: () => import('../views/Pinia.vue')
    },

]

// 1 创建路由实例
const router = createRouter({
    // 3 指定路由模式  4 在main.js里面注册
    //history:createWebHashHistory(),  //路由模式 hash模式    带/#/
    history:createWebHistory(), //history模式 
    routes
})

//导出路由实例
export default router;

//接下来注册路由实例在main.js中


/**
 *     1：下载安装
 *     2： 声明一个路由对象
 *         createRouter()
 *         需要指定路由模式：
 *             history:createWebHashHistory(), //hash模式
 *             history:createWebHistory(), //history模式
 *     3：进行路由表配置
 *     4：在main.js中注册路由实例
 *          app.use(router)
 *     5：在app.vue 里面添加 router-view.有子路由就在主页里面添加 router-view
 * 
 */
